import React from 'react';
import styled from '@emotion/styled';
import { Button } from 'antd';


interface ReconnectMessageBoxProps {
    onHangup: () => void;
    type: string;
}

const InstructionsSpan = styled.span`
	color: #d7d7d7;
	font-family: simsun;
	display: inline-block;
	width: 1.5em;
	vertical-align: bottom;
	overflow: hidden;
	animation: dot 3s infinite step-start;
	@keyframes dot {
		0% {
			width: 0;
			margin-right: 1.5em;
		}
		33% {
			width: 0.5em;
			margin-right: 1em;
		}
		66% {
			width: 1em;
			margin-right: 0.5em;
		}
		100% {
			width: 1.5em;
			margin-right: 0;
		}
	}
`;

const ReconnectMessageBox = (props: ReconnectMessageBoxProps) => {

    const { onHangup, type } = props; // type: ccs | ams | media

    return (
        <div className="reconnect-message-box-container">
            <div className="box-wrapper">
                <p className="label">{'您与坐席管理系统断开，后续将无法收到派工呼叫，请重新登录'}</p>
                <Button className="button" onClick={onHangup}>
                    {'重新登录'}
                </Button>
            </div>
        </div>
    );
};

export default ReconnectMessageBox;
